<!-- 注释 -->
<script lang="jsx">
import { defineComponent, ref, reactive, computed, watch } from 'vue'
import { ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus'
import request from '@/config/axios'

export default defineComponent({
  name: '',
  props: {
    visible: Boolean
  },
  emits: ['update:visible', 'close', 'confirm-click'],
  setup(props, { emit, slots }) {
    const visible = computed({
      get: () => props.visible,
      set(val) {
        emit('update:visible', val)
        !val && emit('close')
      }
    })
    const pageLoading = ref(true)
    const btnLoading = ref(true)
    const done = () => (pageLoading.value = false)
    const offLoading = () => (btnLoading.value = false)

    /** 表单部分 */
    const formRef = ref(null)
    const formField = reactive({})
    const timePass = (rule, val, cb) => {
      if (val === '') {
        cb('请输入时间')
      } else {
        cb()
      }
    }
    const ruels = {
      title: [{ required: true, message: '请输入标题', trigger: 'change' }],
      time: [{ required: true, validator: timePass, trigger: 'change' }]
    }

    /** 点击确定 */
    const saveInfoApi = (data) => request.postV2({ url: '', data })
    const confirmClick = async () => {
      const validate = await formRef.value?.validate((v) => v)
      if (!validate) return
      const data = { ...formField }
      const res = await saveInfoApi(data)
      if (res?.code === 0) {
        ElMessage.success('')
        emit('confirm-click', res.data, done, offLoading)
      } else offLoading()
    }

    /** 初始化 */
    const getInfoApi = (params) => request.getV2({ url: '', params })
    const init = async () => {
      const res = await getInfoApi({})
      if (res?.code === 0) {
        const {} = res.data || {}
      }
    }
    init()

    /** 渲染内容 */
    const RenderForm = () => (
      <ElForm ref={formRef} mode={formField} rules={ruels} class="form-wrap">
        <ElFormItem label="" prop="" class="m-b-30">
          <ElInput v-model={formField.title} />
        </ElFormItem>
      </ElForm>
    )
    const RenderDefault = () => (
      <div>
        <div></div>
        {RenderForm()}
      </div>
    )
    const RenderFooter = () => (
      <>
        <ElButton onClick={done}>取消</ElButton>
        <ElButton onClick={confirmClick}>确定</ElButton>
      </>
    )

    return () => (
      <ElDialog
        v-model={visible.value}
        title=""
        closeOnClickModal={false}
        alignCenter
        width="550px"
        class=""
      >
        {{ default: RenderDefault, footer: RenderFooter }}
      </ElDialog>
    )
  }
})
</script>
<style scoped lang="scss">
//
</style>
